<template>
    <view class="flex-col homepage">
        <view class="flex-row wrapper">
            <view class="flex-col flex-row wraper-col">
                <view class="flex-row box">
                    <view class="u-line-1 text">{{self.name}}</view>
                    <view class="flex-row box-col">
                        <view class="u-line-1 text-two">{{self.relation}}</view>
                    </view>
                </view>
                <view class="u-line-1 text-three">{{self.number}}</view>
            </view>
            <view class="flex-col wraper-col-two"  @click="cutPat">
                <u-icon class="icon-list" name="list" color="#006eff"></u-icon>
                <view class="u-line-1 text-four">切换就诊人</view>
            </view>
        </view>
        <view class="flex-col flex-row wrapper-two" style="margin-top: 5%;">
            <view class="u-line-1 text-five"></view>
            <view class="flex-row wraper-row">
                <view class="u-line-1 text-six">卡内余额</view>
                <view class="u-line-1 text-seven">￥{{balance}}</view>
            </view>
        </view>
        <view class="u-line-1 text-eight" style="margin-top: 5%;">在线充值</view>
        <view class="flex-row wrapper-three" >
            <view class="flex-row wraper-col-three" @click="button(50)">
                <view class="u-line-1 text-nine" hover-class="bg-click" hover-stay-time='20000' >50</view>
            </view>
            <view class="flex-row wraper-col-four" @click="button(100)">
                <view class="u-line-1 text-ten">100</view>
            </view>
            <view class="flex-row wraper-col-five" @click="button(200)">
                <view class="u-line-1 text-eleven">200</view>
            </view>
        </view>
        <view class="flex-row wrapper-four">
            <view class="flex-row wraper-col-six" @click="button(500)">
                <view class="u-line-1 text-twelve">500</view>
            </view>
            <view class="flex-row wraper-col-seven" @click="button(1000)">
                <view class="u-line-1 text-thirteen">1000</view>
            </view>
			<text v-if="zdy">
				<view class="flex-row wraper-col-eight" @click="zdycz">
					<view class="u-line-1 text-fourteen">自定义</view>
				</view>
			</text>
			<text v-else-if="zdy == false">
				<view class="flex-row wraper-col-eight">
					<input class="u-line-1 text-thirteen" v-model="moeny" placeholder="请输入充值金额"/>
					<!-- <view class="u-line-1 text-fourteen">自定义</view> -->
				</view>
			</text>
        </view>
        <u-button class="button" type="success" @click='onclick'>
            确认充值
        </u-button>
		
		<!-- 切换就诊人弹出框 -->
		<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate">
			<view class="popopBox">
				<scroll-view
					scroll-y="true"
					style="height: 50rpx;"
					scroll-with-animation="true"
				>
				</scroll-view>
				<view @click="cutPatient(patient.id)" class="flex-row wrapper" v-for="patient in patient">
					<view class="flex-col flex-row wraper-col">
						<view class="flex-row box">
							<view class="u-line-1 text">{{patient.name}}</view>
							<view class="flex-row box-col">
								<view class="u-line-1 text-two">{{patient.relation}}</view>
							</view>
						</view>
						<view class="u-line-1 text-three">{{patient.number}}</view>
					</view>
				</view>
			</view>
		</u-popup>
    </view>
</template>
<script>
    export default {
        data() {
            return {
				URL: 'http://localhost:9000/', //主域名
				zdy:true,
				self:'',
				balance:'',
				isCut:false,
				cardNo:'',
				moeny:'',
				eVo:{
					money: null
				},
				patient:[]
			}
        },
        methods: {
			
			zdycz(){
				this.zdy =false
			},
			
			onclick() {
				console.log(this.moeny)
				this.eVo.money = this.moeny
				this.eVo.rechargeExplain = '门诊充值'
				this.eVo.hospitalNumber = this.cardNo
				uni.request({
					url: "http://localhost:9000/user/user/patient-card/pay",
					method: "post",
					data: this.eVo,
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							this.record_id = res.data.data.record_id
							console.log(res.data.data.message)
							console.log(res.data.data.record_id)
							//返回上一页
							uni.navigateBack({
								delta:1,//返回层数，2则上上页
							})	
						}
					}
				})
			},
			
			button(moeny){
				this.moeny = moeny
				console.log(this.moeny)
			},
			
			//根据就诊人查询卡内余额
			cardBalance(id){
				uni.request({
					url: this.URL + "record/record/record/cardBalance/" + id,
					method:"GET",
					success: (res) => {
						console.log("balance" , res)
						if (res.data.code = 20000) {
							this.balance = res.data.data.balance.patientCard.balance
							this.cardNo = res.data.data.balance.patientCard.cardNo
							console.log(this.cardNo)
						}
					}
				})
			},
			
			//切换就诊人
			cutPat(){
				this.isCut = !this.isCut
			},
			//切换就诊人
			cutPatient(id){
				console.log(id)
				for (var i = 0; i < this.patient.length; i++) {
					if(id == this.patient[i].id){
						this.self = this.patient[i]
					}
				}
				this.isCut = false
				console.log(this.self)
				this.cardBalance(this.self.id)
			},

        },
		onLoad(res) {
			this.eVo.patientId = res.panId
			this.user = uni.getStorageSync("user");
			console.log(this.user.id)
			// 获取当前用户绑定的就诊人
			uni.request({
				url: this.URL + "user/user/the-patient/patientByUserId/" + this.user.id,
				method: "GET",
				success: (res) => {
					console.log("res" , res)
					if (res.data.code == 20000) {
						this.record = res.data.data.patientList
						console.log("this.record" , this.record)
						this.patient = res.data.data.patientList
						for (var i = 0; i < this.record.length; i++) {
							if (this.record[i].id == this.eVo.patientId) {
								this.self = this.record[i]
							}
						}
						console.log("this.self" , this.self)
						//根据就诊人查询卡内余额
						this.cardBalance(this.self.id)
					}
				}
			})
		}
    }
</script>
<style lang="scss" scoped>
    /** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

    html,
    body {
        margin: 0;
        width: 100%;
        height: 100%;
        font-size: 16px
    }

    view,
    text,
    image {
        position: relative;
        box-sizing: border-box;
        flex-shrink: 0;
    }

    .flex-col {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }

    .flex-row {
        display: flex;
        align-items: flex-start;
    }

    .flex-col .flex-row {
        width: 100%
    }

    /** 全局样式-结束*/
	
	.bg-click{
		 background:red;
	}

    .homepage {
        padding-top: 40rpx;
        border-width: 30rpx;
        border-top-color: #aaaaa;

        .wrapper {
            width: 690rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 30rpx;
            margin-left: auto;
            padding: 20rpx 40rpx 20rpx 30rpx;
            border-radius: 10rpx;
            background: #f3f8ff;

            .wraper-col {
                width: 338rpx;
                margin-top: 10rpx;

                .box {
                    width: 206rpx;
                    justify-content: space-between;
                    margin-bottom: 14rpx;

                    .text {
                        width: 112rpx;
                    }

                    .box-col {
                        width: 94rpx;
                        justify-content: center;
                        padding: 4rpx 0rpx;
                        border-radius: 40rpx;
                        background: #e0ecfe;

                        .text-two {
                            width: 56rpx;
                        }
                    }
                }

                .text-three {
                    width: 100%;
                    font-size: 2rpx;
                    color: #afabaa;
                }
            }

            .wraper-col-two {
                width: 140rpx;
                padding-top: 22rpx;

                .icon-list {
                    display: block;
                    margin-right: auto;
                    margin-bottom: 30rpx;
                    margin-left: auto;
                }

                .text-four {
                    width: 100%;
                }
            }
        }

        .wrapper-two {
            width: 750rpx;
            margin-bottom: 26rpx;

            .text-five {
                margin: 104rpx 0rpx -142rpx 0rpx;
            }

            .wraper-row {
                width: 690rpx;
                justify-content: space-between;
                margin-right: auto;
                margin-left: auto;
                padding: 39rpx 0rpx 39rpx 30rpx;
                border-radius: 10rpx;
                background: #ffffff;

                .text-six {
                    width: 152rpx;
                    font-size: 32rpx;
                }

                .text-seven {
                    width: 176rpx;
                    font-size: 32rpx;
                }
            }
        }

        .text-eight {
            width: 720rpx;
            margin: 0rpx 0rpx 68rpx 30rpx;
            font-size: 36rpx;
        }

        .wrapper-three {
            width: 690rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 40rpx;
            margin-left: auto;

            .wraper-col-three {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-nine {
                    width: 42rpx;
                }
            }

            .wraper-col-four {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-ten {
                    width: 66rpx;
                }
            }

            .wraper-col-five {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-eleven {
                    width: 60rpx;
                }
            }
        }

        .wrapper-four {
            width: 690rpx;
            justify-content: space-between;
            margin-right: auto;
            margin-bottom: 96rpx;
            margin-left: auto;

            .wraper-col-six {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-twelve {
                    width: 54rpx;
                }
            }

            .wraper-col-seven {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-thirteen {
                    width: 66rpx;
                }
            }

            .wraper-col-eight {
                width: 202rpx;
                justify-content: center;
                padding: 30rpx 0rpx;
                border-radius: 10rpx;
                background: #f2f2f2;

                .text-fourteen {
                    width: 94rpx;
                }
            }
        }

        .button {
            width: 704rpx;
            display: block;
            margin-right: auto;
            margin-left: auto;
            letter-spacing: 4rpx;
            font-size: 32rpx;
            background: #006eff;
        }
    }
</style>